<template>
  <el-row type="flex" justify="">
    <el-col :span="10">
      <el-card style="max-width: 540px;height: 300px;margin-left: 40px;">
        <template #header>
          <h3 style="font-weight:600;">生产提示</h3>
        </template>
        <el-row>
          <el-col :span="7">
            <span>{{ form.breedNum }}</span>
            <br>
            <span>待配种</span>
          </el-col>

          <el-col :span="10">
            <span>{{ form.checkNum }}</span>
            <br>
            <span>待首次妊检</span>
          </el-col>

          <el-col :span="5">
            <span>{{ form.gestNum }}</span>
            <br>
            <span>待分娩</span>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card style="max-width: 540px;height: 300px;">
        <template #header>
          <h3 style="font-weight:600;">种母存栏变动</h3>
        </template>
        <VueEcharts style="height:250px" :option="goryoption"></VueEcharts>
      </el-card>
    </el-col>
  </el-row>

    <el-row type="flex" justify="" style="margin-top: 30px;" >
        <el-col :span="10">
          <el-card style="max-width: 540px;height: 350px;margin-left: 40px;">
    <template #header><h3 style="font-weight:600;">羊场实时存栏</h3></template>
    
    <div class="common-layout">
    <el-container>
      <el-header>
        <h3 style="font-weight:600;text-align: center;" >羊场总存栏</h3>
        <br>
        <p style="color:deepskyblue;font-size: 25px;font-weight:600;text-align: center;margin-top: -10px;">{{ form.sleepSum }} <span style="color:black;font-size: 15px;">只</span></p>
        <br>
        <p style="text-align: center;margin-top: -10px;"><span style="background-color: grey;border-radius:30%;color: white;">{{ form.percen}}%</span><span>同比上周</span></p>
        <hr style="width: 800px;margin-left: -35px;margin-top: 20px;">
        <el-row style="margin-top: 20px;margin-left: 40px;">
           <el-col :span="8">
            <span style="margin-left: 20px;color:deepskyblue;font-weight:600;">3</span>
           </el-col>
           <el-col :span="8">
            <span style="margin-left: 20px;color:deepskyblue;font-weight:600;">3</span>
           </el-col>
           <el-col :span="8">
            <span style="margin-left: 20px;color:deepskyblue;font-weight:600;">3</span>
           </el-col>
        </el-row>
        <el-row style="margin-left: 40px;">
           <el-col :span="8">种母存栏</el-col>
           <el-col :span="8">后裔存栏</el-col>
           <el-col :span="8">种公存栏</el-col>
        </el-row>
      </el-header>
      <el-main>

            </el-main>
          </el-container>
        </div>

      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card style="max-width: 540px;height: 350px;">
        <template #header>
          <h3 style="font-weight:600;">近30日存栏趋势</h3>
        </template>

      </el-card>
    </el-col>
  </el-row>

  <el-row type="flex" justify="" style="margin-top: 30px;">
    <el-col :span="10">
      <el-card style="max-width: 540px;height: 350px;margin-left: 40px;">
        <template #header>
          <h3 style="font-weight:600;">种母存栏结构</h3>
        </template>
        <div>
          <VueEcharts style="height:250px;margin-left: 30px;" :option="baroption"></VueEcharts>
        </div>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card style="max-width: 540px;height: 350px;">
        <template #header>
          <h3 style="font-weight:600;">近30日死淘趋势</h3>
        </template>

        <div>
          <VueEcharts style="height:250px" :option="catoption"></VueEcharts>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, computed, watch } from 'vue';
import axios from 'axios';
import 'echarts'
import VueEcharts from 'vue-echarts'
const form = reactive({
  breedNum: '',
  checkNum: '',
  gestNum: '',
  sleepSum: '',
  percen: ''
})


//查询表数据--生产提示
const getTable = () => {
  axios
    .get(
      'http://localhost:5039/api/Tips/SearchBreedTip'
    )
    .then((res) => {
      form.breedNum = res.data.count;
    });
};
const getCheck = () => {
  axios
    .get(
      'http://localhost:5039/api/Tips/SearchCheckTip'
    )
    .then((res) => {
      console.log(res)
      form.checkNum = res.data.count;
    });
};
const getGest = () => {
  axios
    .get(
      'http://localhost:5039/api/Tips/SearchGestTip'
    )
    .then((res) => {
      form.gestNum = res.data.count;
    });
};

//羊场实时存栏
const sleepCount = () => {
  axios.get('http://localhost:5039/api/Inventory/CountSleep').then(res => {
    console.log(res)
    form.sleepSum = res.data.count
    form.percen = res.data.percen
  })
}

//种母存栏结构
const baroption:any=ref([])
const dataPie:any=ref([])
const data2:any=ref([])
const getEcharts=()=>{
  axios.post('http://localhost:5039/api/Inventory/GetGroupGender/GetGroupGender',{
    gender:1
  }).then(res=>{
    console.log(res)
    dataPie.value = res.data.data
  })
}
watch(dataPie, (val: any) => {
  console.log(val)
  val.forEach((x: any) => {
    data2.value.push({ value: x.count, name: x.varietyName });
  });
  console.log(data2.value)
})
baroption.value = ({
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      data: data2.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
//近30日死淘趋势
const catoption = ref([])
catoption.value = ({

  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    }
  ]
});
//种母存栏变动
const goryoption = ref([])
goryoption.value = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        {
          value: 120,
          itemStyle: {
            color: 'red'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: 'green'
          }
        }, {
          value: 150,
          itemStyle: {
            color: 'blue'
          }
        }, {
          value: 100,
          itemStyle: {
            color: 'yellow'
          }
        }, {
          value: 160,
          itemStyle: {
            color: 'orange'
          }
        }, {
          value: 160,
          itemStyle: {
            color: 'black'
          }
        }, {
          value: 160,
          itemStyle: {
            color: 'deepskyblue'
          }
        },

      ],
      type: 'bar'
    }
  ]
};
//钩子函数
onMounted(() => {
  getTable(); //获取表格数据
  getCheck()
  getGest()
  sleepCount()
  getEcharts()
});
</script>